<!DOCTYPE html>
<html>
<head>
    <title>Map Simulator</title>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places,geometry"></script>
    <script type="text/javascript" src="../library/jquery/jquery-1.7.2.min.js"></script>

    <script type="text/javascript" src="../assistant/core.js"></script>
    <script type="text/javascript" src="../assistant/geo-point.js"></script>
    <script type="text/javascript" src="../assistant/place-type.js"></script>
    <script type="text/javascript" src="../assistant/action.js"></script>
    <script type="text/javascript" src="../assistant/task.js"></script>
    <script type="text/javascript" src="../assistant/assistant.js"></script>
    <script type="text/javascript" src="../assistant/google-place-service.js"></script>
    <script type="text/javascript" src="../assistant/mock-environment.js"></script>

    <script type="text/javascript" src="task-control.js"></script>
    <script type="text/javascript" src="simulator.js"></script>
    <script type="text/javascript" src="simulator-init.js"></script>

    <link rel="stylesheet" href="task-control.css"/>
    <link rel="stylesheet" href="route-editor.css"/>
    <link rel="stylesheet" href="simulator.css"/>
</head>
<body>

    <h1>Simulator</h1>

    <section id="map-container">
        <div id="map"></div>
    </section>

    <section id="panel">
        <button id="simulate">Simulate</button>

        <section id="tasks">
            <header>
                <h2>Tasks</h2>
            </header>
        </section>

        <section id="settings">
            <header>
                <h2>Route Editor Settings</h2>
            </header>
            <div>
                <label for="current-time">Current time:</label>
                <input type="text" id="current-time"/>
            </div>
            <div>
                <label for="travel-mode">Travel mode:</label>
                <select id="travel-mode">
                    <option value="walkAndDrive">Walk and Drive</option>
                    <option value="walkAndTransit">Walk and Transit</option>
                    <option value="bikeOnly">Bike Only</option>
                    <option value="walkOnly">Walk Only</option>
                    <option value="transitOnly">Transit Only</option>
                    <option value="driveOnly">Drive Only</option>
                </select>
            </div>
        </section>
        <section id="route-editor">
            <header>
                <h2>Route</h2>
            </header>
            <ol id="route">
            </ol>
            <ol class="route-editor" hidden>
                <li class="route-item">
                    <label for="time1">at</label>
                    <input type="text" class="time control" value="5:45pm" id="time1"/>,
                    <select class="travel-mode control">
                        <option value="drive">drive</option>
                        <option value="walk">walk</option>
                        <option value="bike">bike</option>
                        <option value="transit">transit</option>
                    </select>
                    <label for="source1">from</label>
                    <input type="text" class="location control" id="source1" value="64 Sagamore"/>
                    <label for="destination1">to</label>
                    <input type="text" class="location control" id="destination1" value="Pleasantville"/>
                    (<input type="text" class="duration control" value="1.5h"/>)
                </li>
                <li class="route-item">
                    <label for="time">at</label>
                    <input type="text" class="time control" value="7:00pm" id="time"/>,
                    <select class="travel-mode control">
                        <option value="drive">drive</option>
                        <option value="walk">walk</option>
                        <option value="bike" selected>bike</option>
                        <option value="transit">transit</option>
                    </select>
                    <label for="source">from</label>
                    <input type="text" class="location control" id="source" value="Pleasantville"/>
                    <label for="destination">to</label>
                    <input type="text" class="location control" id="destination" value="64 Sagamore"/>
                    (<input type="text" class="duration control" value="3.5h"/>)
                </li>
                <li class="route-item">
                    <label for="time3">at</label>
                    <input type="text" class="time control" value="7:00pm" id="time3"/>,
                    <select class="travel-mode control">
                        <option value="drive">drive</option>
                        <option value="walk">walk</option>
                        <option value="bike" selected>bike</option>
                        <option value="transit">transit</option>
                    </select>
                    <label for="source3">from</label>
                    <input type="text" class="location control" id="source3" value="Pleasantville"/>
                    <label for="destination3">to</label>
                    <input type="text" class="location control" id="destination3" value="64 Sagamore"/>
                    (<input type="text" class="duration control" value="3.5h"/>)
                </li>
            </ol>
        </section>
    </section>
</body>
</html>
